<html>

<body>
<p>Required fields are outlined in green.</p>
<form id="userProfileForm" dojoType="dijit.form.Form">
<input type="hidden" name="userInstsUpdated" id="userInstsUpdated" />
<input type="hidden" name="userAttrsUpdated" id="userAttrsUpdated" />

  <table>
  <tr>
  <td>
  <button dojoType="dijit.form.Button" id="userModify">
     Modify 
     <script type="dojo/method" event="onClick">
         oscars.UserProfile.postUserModify();
    </script>
  </button>
  </td>

  <td>
  <!-- TODO:  confirmation dialog -->
  <!-- id'd this way to be able to toggle its display based on whether
       profile is oneself or not -->
  <div id="userDeleteDisplay" style="display:none">
     <button dojoType="dijit.form.Button" id="userDelete">
       Delete 
       <script type="dojo/method" event="onClick">
           oscars.UserProfile.postUserRemove();
      </script>
    </button>
  </div>
  </td>
  </tr>
  </table>

  <table>
  <tbody>
  <tr>
    <td>Login Name</td>
    <td class="required">
        <input type="text" name="profileName" id="profileName"
               dojoType="dijit.form.ValidationTextBox"
               required="true"
               promptMessage="Enter a login name"
               invalidMessage="You must enter a login name" />
    </td>
  </tr>
  <tr>
    <td>Password (Enter twice)</td>
    <td class="required">
      <input type="password" name="password" id="password"
             dojoType="dijit.form.ValidationTextBox"
             required="true"
             promptMessage="Enter an account password"
             invalidMessage="You must enter an account password" />
    </td>
  </tr>
  <tr>
    <td>Password Confirmation</td>
    <td class="required">
      <input type="password"
             name="passwordConfirmation" id="passwordConfirmation"
             dojoType="dijit.form.ValidationTextBox"
             required="true"
             promptMessage="Reconfirm the account password"
             invalidMessage="You must reconfirm the account password" />
    </td>
  </tr>
  <tr>
    <td>First Name</td>
    <td class="required">
      <input type="text" name="firstName" id="firstName"
             dojoType="dijit.form.ValidationTextBox"
             regExp="[\w]+" required="true"
             promptMessage="Enter the first name"
             invalidMessage="You must enter the first name" />
    </td>
  </tr>
  <tr>
    <td>Last Name</td>
    <td class="required">
      <input type="text" name="lastName" id="lastName"
             dojoType="dijit.form.ValidationTextBox"
             regExp="[\w]+" required="true"
             promptMessage="Enter the last name"
             invalidMessage="You must enter the last name" />
    </td>
  </tr>
  <tr>
    <!-- unsure at this point what a good regular expression would be;
         various forms -->
    <td>X.509 subject name</td>
    <td>
      <input type="text" name="certSubject" id="certSubject"
             dojoType="dijit.form.ValidationTextBox"
             promptMessage="Enter the certificate subject" />
    </td>
  </tr>
  <tr>
    <td>X.509 issuer name</td>
    <td>
      <input type="text" name="certIssuer" id="certIssuer"
             dojoType="dijit.form.ValidationTextBox"
             promptMessage="Enter the issuer of the certificate" />
    </td>
  </tr>
  <tr>
    <td>Organization</td>
    <td>
        <select name="institutionName" id="institution">
        </select>
    </td>
  </tr>
  <tr>
    <td>Choose Roles</td>
    <td>
    <a href="/OSCARS/docs/attributes.html" target="_blank">Documentation</a>
    </td>
  </tr>
  <tr>
    <td colspan="2">
        <select name="attributeName" id="attributeName"
            multiple="true"
            onChange="oscars.Utils.constrainAttributeChoices('attributeName');
                     return false;">
        </select>
    </td>
  </tr>
  <tr>
    <td>Personal Description</td>
    <td>
       <input name="description" id="description"
              dojoType="dijit.form.TextBox"
              promptMessage="Enter a personal description" />
    </td>
  </tr>
  <tr>
    <td>E-mail (Primary)</td>
    <td class="required">
      <input name="emailPrimary" id="emailPrimary"
             dojoType="dijit.form.ValidationTextBox"
             regExp="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"
             required="true"
             promptMessage="Enter the primary email address"
             invalidMessage="You must enter the primary email address" />
    </td>
  </tr>
  <tr>
    <td>E-mail (Secondary)</td>
    <td>
      <input name="emailSecondary" id="emailSecondary"
             dojoType="dijit.form.ValidationTextBox"
             regExp="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$"
             promptMessage="Enter a secondary email address"
             invalidMessage="You must enter a valid secondary email address" />
    </td>
  </tr>
  <tr>
    <td>Phone Number (Primary)</td>
    <td class="required">
      <input name="phonePrimary" id="phonePrimary"
             dojoType="dijit.form.ValidationTextBox"
             required="true"
             promptMessage="Enter the primary phone number"
             invalidMessage="You must enter the primary phone number" />
    </td>
  </tr>
  <tr>
    <td>Phone Number (Secondary)</td>
    <td>
      <input name="phoneSecondary" id="phoneSecondary"
             dojoType="dijit.form.ValidationTextBox"
             promptMessage="Enter a secondary phone number" />
    </td>
  </tr>
  </tbody>
  </table>
</form>
</body>
</html>
